<template>
    <div class="tooltip-container">
        <!-- 触发元素 -->
        <div
            ref="trigger"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
        >
            <slot></slot>
        </div>

        <!-- 提示框 -->
        <div
            v-if="visible"
            ref="overlay"
            class="tooltip-overlay"
            :style="overlayStyle"
            @mouseenter="handleWindowMouseEnter"
            @mouseleave="handleWindowMouseLeave"
        >
            <slot name="content">{{ content }}</slot>
        </div>
    </div>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2025-01-07 18:01
 */
export default {
    name:'x-tooltip',
    props: {
        content: {
            type: String,
            default: '',
        },
        overStyle:{
            default: ()=>({})
        },
        /*边界*/
        boundary:{
            default:()=>({
                top:60,
                bottom:0
            })
        }
    },
    data() {
        return {
            visible: false,
            overlayStyle: {},
            time:null
        };
    },
    methods: {
        handleWindowMouseEnter(){
            this.visible = true ;
            this.time && clearTimeout(this.time);

        },
        handleWindowMouseLeave(){
            this.hide();
        },
        handleMouseEnter() {
            this.show();
        },
        handleMouseLeave() {
            this.time = setTimeout(()=>{
                this.hide();
            },200)
        },

        show() {
            if(this.content || this.$slots.content){
                this.visible = true;
                this.$nextTick(() => {
                    this.updatePosition();
                });
            }
        },
        hide() {
            this.visible = false;
        },
        updatePosition() {
            const triggerRect = this.$refs.trigger.getBoundingClientRect();
            const overlayRect = this.$refs.overlay.getBoundingClientRect();
            const w_height = document.documentElement.offsetHeight ;
            const { boundary } = this;
            let top, left,bottom = 'auto',style = {};
            top = triggerRect.top + (triggerRect.height - overlayRect.height) / 2;
            left = triggerRect.right + 8;

            if(top < boundary.top){
                top = boundary.top
            }
            if(top + overlayRect.height > w_height){
                bottom = top === bottom.top? boundary.bottom : 10;
            }
            if(overlayRect.height > (w_height / 2) ){
                left -= 8 ;
                top = boundary.top;
                bottom = boundary.bottom;
                style = {
                    borderLeft:'1px solid #ddd',
                    boxShadow:"8px 4px 8px rgba(0, 0, 0,  .15)",
                    borderRadius:"0 6px 6px 0"
                }

            }
            this.overlayStyle = {
                top: `${top}px`,
                left: `${left}px`,
                bottom:typeof bottom === 'string'?bottom:`${bottom}px`,
                ...style
            };
        },
    },
}
</script>

<style scoped>
.tooltip-container {
    position: relative;
}

.tooltip-overlay {
    position: fixed;
    z-index: 1000;
    padding: 10px 0 10px 10px;
    background-color: white;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0,  .15);
}
</style>